<template>
  <div class="reset-wrap">
    <div class="reset-box">
      <div class="reset-left">
        <img
          class="reset-img"
          src="/images/account.jpg"
        />
      </div>
      <div class="reset-right">
        <div class="title">
          找回密码
        </div>
        <div class="form-body">
          <el-tabs
            stretch
            v-model="activeName"
          >
            <el-tab-pane
              label="短信找回"
              name="first"
            >
              <reset-form />
            </el-tab-pane>
            <el-tab-pane
              label="邮箱找回"
              name="second"
            >
              <email-reset-form />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="foot">
          <p>已有账号？请
            <router-link to="/login">
              <span>登录</span>
            </router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ResetForm from './form/ResetForm'
import EmailResetForm from './form/EmailResetForm'

export default {
  name: 'ForgetPassword',
  components: {
    ResetForm,
    EmailResetForm
  },
  data () {
    return {
      activeName: 'first'
    }
  }
}
</script>

<style lang="scss" scoped>
.reset-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .reset-box {
    margin: auto;
    width: $global_width;
    height: $account_card_height;
    box-shadow: 10px 10px 35px 4px rgba(0, 0, 0, 0.15);
    display: flex;
    .reset-left {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $half_global_width;
      height: $account_card_height;
      background-color: #fff;
      .reset-img {
        width: $half_global_width;
        height: auto;
      }
    }
    .reset-right {
      width: $half_global_width;
      height: $account_card_height;
      padding: 100px 150px;
      box-sizing: border-box;
      position: relative;
      .title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 30px;
      }
      .form-body {
        height: $account_form_height;
      }
      .foot {
        width: 100%;
        text-align: center;
        border-top: 1px solid #ccc;
        p {
          font-size: 14px;
        }
      }
    }
  }
}
</style>
